<template>
    <div>
        <el-dialog
                :title='title'
                class='c-dialog-fixed'
                :visible.sync='show'
                :append-to-body='inDialog'
                top="60px"
                @open='openDialog'
                @close='closeDialog'>
            <div v-loading='loading'>
                <divider title='菜单信息'></divider>
                <el-form
                        :model='form' :rules='rules'
                        ref='form' label-width='85px'
                        size='mini' status-icon
                        class='c-form-mini'>
                    <el-form-item label='上级节点' prop='parent_id' :inline-message='true'>
                        <el-input v-model='form.parent_menu' placeholder='点击选择，为空则为顶级节点' readonly
                                  @click.native='openSelectMenuDialog'>
                            <i
                                    style='cursor: pointer;'
                                    v-show='form.parent_id'
                                    slot="suffix"
                                    class="el-input__icon el-icon-close"
                                    @click.stop='form.parent_menu="";form.parent_id=null'></i>
                        </el-input>
                    </el-form-item>
                    <el-form-item label='接口名称' prop='api_name'>
                        <el-input v-model.trim='form.api_name' placeholder=''>
                        </el-input>
                    </el-form-item>
                    <el-form-item label='接口路径' prop='url'>
                        <el-input v-model.trim='form.url' placeholder=''>
                        </el-input>
                    </el-form-item>
                    <el-form-item label='接口类型' prop='type'>
                        <el-radio-group v-model="form.type" size="mini">
                            <el-radio :label="parseInt(item.value)" v-for="item in dict.api_auth.type">{{item.name}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label='鉴权'  prop='is_checked'>
                        <el-radio-group v-model="form.is_checked" size="mini">
                        <el-radio :label="parseInt(is_checked_item.value)" v-for="is_checked_item in dict.api_auth.is_checked">{{is_checked_item.name}}</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label='启用'  prop='status'>
                        <el-radio-group v-model="form.status" size="mini">
                        <el-radio :label="parseInt(status_item.value)" v-for="status_item in dict.api_auth.status">{{status_item.name}}</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label='备注' prop='remark'>
                        <el-input v-model.trim='form.remark' placeholder=''>
                        </el-input>
                    </el-form-item>

                </el-form>
            </div>
            <div slot="footer">
                <el-button type='primary' @click='save(0)' :loading='loading'>保存</el-button>
                <el-button @click="show=false">关 闭</el-button>
            </div>
        </el-dialog>
        <type-dialog :in-dialog='inDialog' ref='typeDialog'>
            <template slot='right' slot-scope='{node,data}'>
                <el-button :disabled='isDisable(data)' type='text' @click='selectType(data)'>选择</el-button>
            </template>
        </type-dialog>
    </div>
</template>
<script>
  import api from '@/api/api/auth'
  import typeDialog from './treeDialog'
  import {mapState, mapActions} from 'vuex'

  const formInit = {
    url: '',
    api_name: null,
    id: null,
    status: -1,
    remark: 99,
    type: '',
    is_checked: '',
    pid: 0,
    parent_menu: '',
  }
  export default {
    components: {
      typeDialog
    },
    props: {
      inDialog: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        resolve: null,
        show: false,
        loading: false,
        updated: false,
        data: {},
        form: {...formInit},
        rules: {
          url: [{required: true, message: '请填写接口路径'}],
          api_name: [{required: true, message: '请填写接口名称'}],
          status: [{type: 'number', message: '请选择是否启用'}],
          remark: [{required: true, message: '请填写备注'}],
          type: [{type: 'number', message: '请选择接口类型'}],
          is_checked: [{type: 'number', message: '请选择是否启用'}],
          pid: [{type: 'number', message: '请选择是否启用'}]
        },
        updated: false
      }
    },
    computed: {
      ...mapState({dict: state => state.sys.dict}),
      isEdit() {
        return this.form.id ? true : false
      },
      title() {
        let title = '菜单信息'
        if (this.isEdit) {
          title += ' [ 修改 ]'
        } else {
          title += ' [ 新增 ]'
        }
        return title
      }
    },
    mounted() {

    },
    methods: {
      openDialog() {
        this.$nextTick(() => {
          if (this.resolve) {
            this.resolve(this)
          }
        })
      },
      open() {
        this.show = true
        return new Promise((resolve, reject) => {
          this.resolve = resolve
        })
      },
      closeDialog() {
        if (this.updated) {
          this.$emit('updated', this.form)
        }
        this.resetFields()
      },
      create() {
        this.loading = true
        return new Promise((resolve, reject) => {
          api.create().then(res => {
            this.initData(res.data)
            this.loading = false
            resolve()
          })
        })
      },
      getForm(id) {
        this.loading = true
        api.getForm(id).then(res => {
          this.initData(res.data)
          this.loading = false
        })
      },
      initData(data) {
        this.assign(data)
        this.clearValidate()
      },
      assign(data) {
        this.form = {...this.form, ...data}
        this.form.order = Number(this.form.order)
        return this
      },
      save(status = 0) {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.form.action = status
            this.loading = true
            api.save(this.form).then(res => {
              this.form.id = res.data.id
              this.loading = false
              this.$message.success('保存成功')
              this.updated = true
              this.show = false
            }).catch(res => {
              this.loading = false
              console.log(res)
            })
          } else {
            return false
          }
        })
      },
      clearValidate() {
        this.$nextTick(() => {
          this.$refs.form && this.$refs.form.clearValidate()
        })
      },
      resetFields() {
        this.updated = false
        this.form = {...formInit}
        this.clearValidate()
        return this
      },

      openSelectMenuDialog() {
        this.$refs.typeDialog.open().then(that => {
          that.initData()
        })
      },
      selectType(data) {
        this.form.parent_id = data.id;
        this.form.pid = data.id;
        this.form.parent_menu = data.api_name;
        this.$refs.typeDialog.close()
      },

      isDisable(data) {
        let parentIds = (data.parent_ids || '').split(',')
        return this.isEdit && (data.id == this.form.id || parentIds.indexOf(this.form.id.toString()) >= 0)
      },
      getFieldList(field) {
        return (keyword, callback) => {
          api.getFieldList({field, keyword}).then(res => {
            callback(res.data)
          })
        }
      },
    }
  }
</script>
